<template>
  <div class="gailan-l">
    <!-- 设备概览 -->
    <el-card class="box-card shebei">
      <div slot="header" class="clearfix">
        <span class="title_card"
          >设备概览<span class="iconfont icon-askoutline"></span
        ></span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >绑定设备</el-button
        >
      </div>
      <div class="gailan-l_item">
        <div>
          <img src="@/assets/img/gateway.png" alt="" class="img_4" />
        </div>
        <div>
          <div style="font-size: 40px; font-weight: 700">
            {{ deviceObj.LoRaWAN.total }}
          </div>
          <div style="font-size: 20px; font-weight: 600">LoRaWAN</div>
          <div style="font-size: 20px; font-weight: 600">网关</div>
        </div>
        <div>
          <div style="font-size: 40px; font-weight: 700">
            {{ deviceObj.LoRaPP.total }}
          </div>
          <div style="font-size: 20px; font-weight: 600">LoRaWAN</div>
          <div style="font-size: 20px; font-weight: 600">网关</div>
        </div>
        <div>
          <div style="font-size: 40px; font-weight: 700">
            {{ deviceObj.group }}
          </div>
          <div style="font-size: 20px; font-weight: 600">群组</div>
        </div>
        <div class="last_icon">
          <div class="iconfont icon-yalichuanganqi"></div>
          <div style="font-size: 40px; font-weight: 700">
            {{ deviceObj.sensor.total }}
            <div style="font-size: 20px; font-weight: 600">传感器节点</div>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 监控 -->
    <el-card class="box-card jiankong">
      <div slot="header" class="clearfix">
        <span class="title_card"
          >监控
          <span class="iconfont icon-askoutline"></span>
        </span>
      </div>
      <div>
        <div
          style="
            font-size: 16px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          网关离线
          <span
            style="
              display: inline-block;
              width: 50px;
              height: 20px;
              background: #ddf0e0;
              text-align: center;
              line-height: 20px;
              color: green;
              border-radius: 10px;
            "
          >
            {{ deviceObj.LoRaWAN.total }}</span
          >
        </div>

        <div
          style="
            font-size: 16px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            align-items: center;
          "
        >
          节点离线
          <span
            style="
              display: inline-block;
              width: 50px;
              height: 20px;
              background: #ddf0e0;
              text-align: center;
              line-height: 20px;
              color: green;
              border-radius: 10px;
            "
          >
            {{ deviceObj.sensor.offline }}</span
          >
        </div>

        <div
          style="
            font-size: 16px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            align-items: center;
          "
        >
          传感器低电量
          <span
            style="
              display: inline-block;
              width: 50px;
              height: 20px;
              background: #fbdadb;
              text-align: center;
              line-height: 20px;
              color: red;
              border-radius: 10px;
            "
          >
            {{ deviceObj.sensor.lowBattery }}</span
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// 引入 api 接口
import { $deviceCount } from "@/api/index.js";
export default {
  name: "DeviceView",
  data() {
    return {
      deviceObj: {
        LoRaWAN: "",
        LoRaPP: "",
        group: "",
        sensor: "",
      },
    };
  },
  mounted() {
    $deviceCount().then((res) => {
      console.log(res);
      this.deviceObj = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.gailan-l {
  .shebei {
    width: 75%;
  }
  .jiankong {
    margin-left: 10px;
    width: 25%;
  }
}
.title_card {
  font-weight: bolder;
  font-size: 18px;
}
.gailan-l_item {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.gailan-l_item > div {
  width: 20%;
  vertical-align: middle;
  height: 100%;
  position: relative;
}
.gailan-l_item > div:nth-child(n-4)::after {
  position: absolute;
  content: "";
  left: 150px;
  top: 10px;
  display: inline-block;
  width: 2px;
  height: 100px;
  background: rgba(145, 168, 191, 0.2);
}
.gailan-l_item > div:last-child::after {
  content: "";
  left: 150px;
  top: 10px;
  display: inline-block;
  width: 0px;
  height: 100px;
  background: rgba(145, 168, 191, 0.2);
}
.gailan-l_item > div:nth-child(1)::after {
  position: absolute;
  content: "";
  left: 150px;
  top: 30px;
  display: inline-block;
  width: 2px;
  height: 100px;
  background: rgba(145, 168, 191, 0.2);
}
.gailan-l_item > div:nth-child(5)::after {
  content: "";
  display: inline-block;
  width: 0px;
}
.gailan-l_item > div:nth-child(4)::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 100px;
  position: absolute;
  left: 150px;
  top: 0px;
}
.img_4 {
  width: 40%;
}
.icon-yalichuanganqi {
  font-size: 50px;
  color: rgba(145, 168, 191, 0.4);
  position: absolute;
  left: -20px;
  top: 25px;
  transform: rotateX(180deg);
}
.last_icon {
  display: flex;
  justify-content: space-around;
}
</style>